<template>
    <div>
        <a-modal
            v-model:open="props.isShowModal"
            :bodyStyle="{ height: 'calc(100vh - 150px)'}"
            ok-text="加入购物车"
            style="top: 10px"
            title="商品详情"
            width="100%"
            wrap-class-name="full-modal"
            @ok="handleOk"
        >
            <el-scrollbar>
                <!--预约商品-->
                <a-list item-layout="vertical" size="large">
                    <a-list-item>
                        <template #extra>
                            <ProductImagesComponent v-model:productImagesArr="skuInfoItemVo.skuImages"
                                                    style="width: 600px;"></ProductImagesComponent>
                        </template>
                        <a-list-item-meta :description="skuInfoItemVo.skuInfo.skuSubtitle">
                            <template #title>
                                {{ skuInfoItemVo.skuInfo.skuTitle }}
                            </template>
                        </a-list-item-meta>
                        <a-form
                            :model="appointmentProductData"
                            layout="horizontal"
                        >
                            <a-divider :style="cssVar.divider" />
                            <a-form-item ref="price" label="价格" name="price" style="color: red">
                                ￥{{ skuInfoItemVo.skuInfo.price }}
                            </a-form-item>
                            <a-divider :style="cssVar.divider" />
                            <a-form-item ref="" label="增值业务" name="">

                            </a-form-item>
                            <a-form-item ref="" label="配送至" name="">
                                <a-select v-model:value="appointmentProductData.region" placeholder="选择配送地区"
                                          style="width: 200px">
                                    <a-select-option value="shanghai">上海</a-select-option>
                                    <a-select-option value="beijing">湖北</a-select-option>
                                </a-select>
                                有货
                                <p></p>
                                由谷粒商城发货,并提供售后服务
                            </a-form-item>
                            <a-divider :style="cssVar.divider" />

                            <a-form-item v-for="(attr, index) in skuInfoItemVo.saleAttrs" :key="attr.attrId"
                                         ref=""
                                         :label="'选择'+attr.attrName" name="">
                                <a-radio-group v-model:value="appointmentProductData.attr[index]">
                                    <a-radio-button v-for="(value,i) in attr.attrValue" :key="value" :value="value">
                                        {{ value }}
                                    </a-radio-button>
                                </a-radio-group>
                            </a-form-item>

                            <a-divider :style="cssVar.divider" />
                            <a-form-item ref="" label="购买" name="">
                                <el-input-number v-model="computedBuyNum" controls-position="right">
                                    <template #decrease-icon>
                                        <el-icon>
                                            <Minus />
                                        </el-icon>
                                    </template>
                                    <template #increase-icon>
                                        <el-icon>
                                            <Plus />
                                        </el-icon>
                                    </template>
                                </el-input-number>
                                <a-button danger style="margin-left: 10px" type="primary" @click="addToCart">
                                    加入购物车
                                </a-button>
                            </a-form-item>
                            <a-form-item label="本地活动" name="">
                                <el-link type="primary">1元500MB激活到账30元 >></el-link>
                            </a-form-item>
                            <a-form-item label="温馨提示" name="">
                                本产品不能使用 京东券 · 请完成预约后及时抢购
                            </a-form-item>
                        </a-form>
                    </a-list-item>
                </a-list>
                <!--步骤条-->
                <a-divider style="background-color:red;height: 3px" />
                <!--商品介绍-->
                <a-steps style="background-color: #eee">
                    <a-step v-for="stepItem in stepItems"
                            :key="stepItem.title" :description="stepItem.description" :status="stepItem.status">
                        <template #title>
                            <el-link type="primary">{{ stepItem.title }}</el-link>
                        </template>
                        <template #icon>
                            <MyIconComponent :type="stepItem.icon" />
                        </template>
                    </a-step>
                </a-steps>
                <ProductIntroductionComponent :skuInfoItemVo="skuInfoItemVo"
                                              style="margin-top: 10px"></ProductIntroductionComponent>
            </el-scrollbar>
        </a-modal>

    </div>
</template>

<script lang="ts" setup>
import { ProductDetailsProps } from "@/model/SearchModel.ts";
import { computed, onMounted, ref } from "vue";
import { SkuInfoItemVo } from "@/model/ProductModel.ts";
import { getSkuInfoById } from "@/api/product/SearchApi.ts";
import ProductImagesComponent from "@/pages/search/ProductImagesComponent.vue";
import { Minus, Plus } from "@element-plus/icons-vue";
import MyIconComponent from "@/components/MyIconComponent.vue";
import type { AStep } from "@/model/UIComponent.ts";
import ProductIntroductionComponent from "@/pages/search/product-details/ProductIntroductionComponent.vue";
import { addProductToCart } from "@/api/cart/CartApi.ts";


//预约步骤条数据
const stepItems = ref<AStep[]>([
    {
        title: "1.等待预约",
        description: "预约即将开始",
        status: "process",
        icon: "icon-yuyuezhong",
    },
    {
        title: "2.预约中",
        description: "预约即将开始",
        status: "process",
        icon: "icon-dengdaiyuyue",
    },
    {
        title: "3.等待抢购",
        description: "抢购即将开始",
        status: "process",
        icon: "icon-dengdaiqianggou",
    },
    {
        title: "4.抢购中",
        description: "",
        status: "process",
        icon: "icon-gouwuche1",
    },
]);

//本组件需要的属性
const props = defineModel<ProductDetailsProps>("props");

//Css样式变量
const cssVar = ref({
    //分割线
    divider: {
        height: "2px",
        backgroundColor: "#eee",
    },
});


//商品详情数据
const skuInfoItemVo = ref<SkuInfoItemVo>({
    skuInfo: {
        skuId: 0,
        spuId: 0,
        skuName: "",
        skuDesc: "",
        catelogId: 0,
        brandId: 0,
        skuDefaultImg: "",
        skuTitle: "",
        skuSubtitle: "",
        price: 0,
        saleCount: 0,
    },
    skuImages: [
        {
            id: 0,
            skuId: 0,
            imgUrl: "",
            imgSort: 0,
            defaultImg: 0,
        },
    ],
    saleAttrs: [
        {
            attrId: 0,
            attrName: "",
            attrValue: [
                "",
            ],
        },
    ],
    spuInfoDesc: {
        spuId: 0,
        decript: "",
    },
    groupAttrs: [
        {
            groupName: "",
            attrs: [
                {
                    attrName: "",
                    attrValue: "",
                },
            ],
        },
    ],
});

interface AppointmentProductData {
    buyNum: number;//购买数量
    region: string;//配送地区
    attr: string[];//选择规格属性
}

//购买商品所需数据
const appointmentProductData = ref<AppointmentProductData>({
    buyNum: 1,
    region: "",
    attr: [],
});
/**
 * 加入购物车
 */
const addToCart = () => {
    addProductToCart(props.value.skuId, computedBuyNum.value);
};

/**
 * 计算购买数量
 */
const computedBuyNum = computed<number>({
    get() {
        //判断是否有小数位
        if (appointmentProductData.value.buyNum % 1 !== 0) {
            return Math.ceil(appointmentProductData.value.buyNum);
        }
        return appointmentProductData.value.buyNum;
    },
    set(value) {
        return value <= 0 ? appointmentProductData.value.buyNum = 1 : appointmentProductData.value.buyNum = value;
    },
});

const handleOk = () => {

};
/**
 * 获取商品详情
 */
const getSkuInfo = () => {
    getSkuInfoById(props.value.skuId).then(res => {
        console.table(res.data[0]);
        skuInfoItemVo.value = res.data[0];
    });
};

//挂载钩子
onMounted(() => {
    //1. 获取商品详情
    getSkuInfo();
});

</script>

<style lang="scss" scoped>

</style>